/* 论坛列表 */
<template>
	<view class="forums">
		<!-- 帖子列表 -->
		<view class="list">
			<view
				class="forum"
				v-for="(item) in arr_discussions"
				:key="item.id"
				@click="$router.navigateToForumDetail({id: item.id})"
			>
				<forum-card :forum="item" />
			</view>
		</view>
		<view
			class="remark center"
			@click="$router.navigateToEditForum()"
		>
			{{bottomText}}
		</view>
	</view>
</template>

<script>
import { getAllDiscussions } from '@/api/forum.js'
import ForumCard from './components/ForumCard.vue'
export default {
  components: {
    'forum-card': ForumCard
  },
  data() {
    return {
      arr_forumTags: [{ id: 0, name: '全部' }],
      arr_sort: [
        { label: '时间', value: 'latest' },
        { label: '热度', value: 'hottest' }
      ],
      strategy: { label: '时间', value: 'latest' }, // 排序方式
      activeTagIndex: 0,
      pageNum: 1,
      pageSize: 15,
      keyword: '',
      is_loadAll: false,
      arr_discussions: [],
      searchText: '',
    }
  },
  computed: {
    bottomText() {
      let res = ''

      if (this.arr_discussions.length === 0) {
        res = '没有找到相关讨论,点击创建!'
      } else if (this.is_loadAll) {
        res = '已加载全部讨论,没找到合适？点击创建!'
      }
      return res
    }
  },
  watch: {
    'activeTagIndex': function() {
      this.loadDisc(true, true)
    }
  },
  async created() {
    this.loadDisc(true)
  },
  methods: {
    reachBottom() {
      this.loadDisc()
    },
    /**
		 * 加载讨论帖子
		 */
    loadDisc(init = false) {
      if (init) {
        this.$loading()
        this.pageNum = 1
        this.is_loadAll = false
      }
      if (this.is_loadAll) {
        return
      }

      getAllDiscussions({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        strategy: this.strategy.value,
        keyWords: this.keyword
      })
        .then(res => {
          this.arr_discussions = init ? res.pageData : this.arr_discussions.concat(res.pageData)
          /* 判断页码 */
          if (res.pageData.length < this.pageSize) {
            this.is_loadAll = true
          } else {
            this.pageNum++
          }
          console.log(this.arr_discussions)
        })
        .finally(() => this.$hideLoading())
    },
    /**
		 * 点击筛选.调用menu弹窗选择排序
		 */
    onclickSort() {
      this.$menuPicker(this.arr_sort)
        .then(res => {
          if (res && res.value !== this.strategy.value) {
            this.strategy = res
            this.loadDisc(true, true)
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.forums {
  min-height: calc(100vh - 50px);

  .filter {
    position: fixed;
    top: 50px;
    z-index: 10;
    width: 100%;
    background-color: #ffffff;
    border-bottom: $border2;

    .tags {
      display: flex;
      align-items: center;
      height: 42px;
      padding: 0 5px;
      margin-right: 55px;
      overflow-x: auto;

      &::-webkit-scrollbar {
        display: none;
      }

      .tag {
        flex-shrink: 0;
        padding: 10px 5px;
        margin: 0 5px;
        border-bottom: 3px solid transparent;

        &.active {
          color: $primary2;
          border-bottom-color: $primary2;
        }
      }
    }

    .sort {
      position: fixed;
      top: 50px;
      right: 0;
      display: flex;
      align-items: center;
      height: 42px;
      padding: 0 5px;
      color: $primary1;
      background-color: #ffffff;
      border-left: $border2;

      .iconfont {
        margin-left: 2px;
        font-size: 24rpx;
      }
    }
  }

  .search {
    display: flex;
    align-items: center;
    padding: 0 10px;
    margin: 10px 0;

    .iconfont {
      margin-left: 5px;
      font-size: 45rpx;
      color: $primary2;
    }
  }

  .list {
    margin: 10px 0;
    background-color: #ffffff;

    .forum {
      display: block;
      border-bottom: $border2;
    }
  }

  .remark {
    display: block;
    margin: 10px 0;
    color: $primary1;
  }
}
</style>
